import React, { useState, useEffect } from 'react'
import { Input, Tabs, Sticky, Card, Button, Toast, Dialog } from 'react-vant'
import { ArrowLeft } from '@react-vant/icons'
import { history, useLocation } from 'umi'
import axios from 'axios'
import './zhifu.css'

export default function Zhifu() {
    const location = useLocation()
    const [selectkey, setkey] = useState("")
    const [toulist, settouist] = useState([])
    const [bodylist, setbodyist] = useState([])

    const selectbtn = (ev) => {
        if (ev.keyCode === 13) {
            if (ev.target.value) {
                setkey(ev.target.value)
                // getbodylist()
            }
        }
    }

    const gettoulist = async () => {
        const { data } = await axios.get('http://localhost:3000/zhifu')
        if (data.code === 200) {
            settouist(data.data)
        }
    }
    const getbodylist = async (id) => {
        const { data } = await axios.get('http://localhost:3000/zhifubody?tid=' + id)
        // const { data } = await axios.get('http://localhost:3000/zhifubody?', { params: { tid: id, keyword: selectkey } })
        if (data.code === 200) {
            setbodyist(data.data)
        }
    }

    useEffect(() => {
        gettoulist()
        getbodylist(
            toulist.length !== 0 ? toulist[location.state.ids]._id : '6529266f93e836ec317e419a'
        )
    }, [])

    // 去往详情页
    const xiang = (obj) => {
        history.push('/zhixiang', { obj: obj })
    }
    const maps = () => {
        history.push('/map')
    }

    const newlist = bodylist.filter(item => item.bian.includes(selectkey))

    const quxiao = async (id) => {
        await axios.get('http://localhost:3000/xiaoding/' + id)
        getbodylist('6529266f93e836ec317e419a')
        console.log(id, '取消订单');
    }
    return (
        <div style={{ background: "#e3e3e3", height: "100%" }}>
            <div >
                {/* 返回按钮和搜索框 */}
                <Sticky >
                    <div style={{ marginTop: "15px", background: "#fff" }}>
                        <p className='fanleft' onClick={() => history.push('/app/my', { obj: bodylist })}><ArrowLeft fontSize={25} /></p>
                        <div style={{ width: "80%", display: "inline-block", }}>
                            <Input
                                placeholder="搜索订单"
                                onKeyDown={ev => selectbtn(ev)}
                                clearTrigger="always"
                                className='inputselect'
                            />
                        </div>
                    </div>
                    <Tabs defaultActive={3} onChange={(a) => getbodylist(toulist[a]._id)}>
                        {toulist.map(item => (
                            <Tabs.TabPane key={item._id} title={item.title} />
                        ))}
                    </Tabs>
                </Sticky>
                <div>
                    {
                        selectkey ?
                            <div>
                                {
                                    newlist.map((item2) => (
                                        <Card key={item2._id}>
                                            <div>
                                                <div style={{ cursor: "pointer" }} onClick={() => xiang(item2)}>
                                                    <Card.Header style={{ display: "inline-block", }}>{item2.bian}</Card.Header>
                                                    <p style={{ color: "red", display: "inline-block", position: 'absolute', right: "20px", top: "8px" }}>{item2.title}</p>
                                                    {/* 图片 */}
                                                    <div style={{ textAlign: "center", marginBottom: "6px" }}>
                                                        {
                                                            item2.imgs.map((item3, index3) => (
                                                                <div key={index3} style={{ display: "inline-block", margin: "0 5px 0 " }}>
                                                                    <img src={item3.img} alt="" style={{ width: "80px", }} />
                                                                    <p> X{item3.num}</p>
                                                                </div>
                                                            ))
                                                        }
                                                    </div>
                                                    {/* 商品数量 */}
                                                    <div style={{ marginBottom: "10px", textAlign: "right", marginRight: "15px" }}>
                                                        <p>共{item2.imgs.length}件商品，共计:<span style={{ color: "red" }}>￥{item2.num * item2.price}</span></p>
                                                    </div>
                                                </div>
                                                <p style={{ width: "100%", border: "1px solid black" }}></p>
                                                {/* 按钮 */}
                                                <div style={{ height: "50px" }}>
                                                    {
                                                        item2.flag === 0 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}

                                                                >取消订单</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即支付</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {/* 代发货按钮 */}
                                                    {
                                                        item2.flag === 1 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                                    onClick={() => history.push('/shen', { obj: item2 })}
                                                                >
                                                                    申请退款</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>
                                                                    提醒发货</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 2 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                                    onClick={maps}
                                                                >
                                                                    查看物流</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>确认收货</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 3 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "3px" }}>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={() => Toast.success('删除成功')}
                                                                >删除订单</Button>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={maps}
                                                                >查看物流</Button>
                                                                <Button round type='info' hairline style={{ width: "90px", height: "35px", color: "#fff" }}>评价</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 4 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={() => { console.log('返回首页'); }}
                                                                >再来一单</Button>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={() => Toast.success('删除成功')}
                                                                >删除订单</Button>

                                                            </div>
                                                            : ""
                                                    }
                                                </div>
                                            </div>
                                        </Card>
                                    ))

                                }
                            </div>
                            :
                            <div>
                                {
                                    bodylist.map((item2) => (
                                        <Card key={item2._id}>
                                            <div>
                                                <div style={{ cursor: "pointer" }} onClick={() => xiang(item2)}>
                                                    <Card.Header style={{ display: "inline-block", }}>{item2.bian}</Card.Header>
                                                    <p style={{ color: "red", display: "inline-block", position: 'absolute', right: "20px", top: "8px" }}>{item2.title}</p>
                                                    {/* 图片 */}
                                                    <div style={{ textAlign: "center", marginBottom: "6px" }}>
                                                        {
                                                            item2.imgs.map((item3, index3) => (
                                                                <div key={index3} style={{ display: "inline-block", margin: "0 5px 0 " }}>
                                                                    <img src={item3.img} alt="" style={{ width: "80px", }} />
                                                                    <p> X{item3.num}</p>
                                                                </div>
                                                            ))
                                                        }
                                                    </div>
                                                    {/* 商品数量 */}
                                                    <div style={{ marginBottom: "10px", textAlign: "right", marginRight: "15px" }}>
                                                        <p>共{item2.imgs.length}件商品，共计:<span style={{ color: "red" }}>￥{item2.num * item2.price}</span></p>
                                                    </div>
                                                </div>
                                                <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                                {/* 按钮 */}
                                                <div style={{ height: "50px" }}>
                                                    {
                                                        item2.flag === 0 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                                    onClick={() =>
                                                                        Dialog.confirm({
                                                                            title: '取消订单',
                                                                            message: '确定要取消订单？',
                                                                            onCancel: () => console.log('cancel'),
                                                                            onConfirm: () => quxiao(item2._id),
                                                                        })
                                                                    }
                                                                >
                                                                    取消订单</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>
                                                                    立即付款</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {/* 代发货按钮 */}
                                                    {
                                                        item2.flag === 1 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                                    onClick={() => history.push('/shen', { obj: item2 })}
                                                                >
                                                                    申请退款</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}
                                                                    onClick={() => Toast.success('提醒发货成功')}
                                                                >
                                                                    提醒发货</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 2 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                                    onClick={maps}
                                                                >
                                                                    查看物流</Button>
                                                                <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>确认收货</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 3 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "3px" }}>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={() => Toast.success('删除成功')}
                                                                >删除订单</Button>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={maps}
                                                                >查看物流</Button>
                                                                <Button round type='info' hairline style={{ width: "90px", height: "35px", color: "#fff" }}
                                                                    onClick={() => history.push('/ping', { obj: item2 })}
                                                                >评价</Button>
                                                            </div>
                                                            : ""
                                                    }
                                                    {
                                                        item2.flag === 4 ?
                                                            <div style={{ lineHeight: "40px", float: "right", marginRight: "8px" }}>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}>再来一单</Button>
                                                                <Button round type='primar' hairline style={{ width: "90px", height: "35px" }}
                                                                    onClick={() => Toast.success('删除成功')}
                                                                >删除订单</Button>

                                                            </div>
                                                            : ""
                                                    }
                                                </div>
                                            </div>
                                        </Card>
                                    ))

                                }
                            </div>

                    }
                </div>

            </div>
        </div >

    )
}
